<!-- local.html -->
<!DOCTYPE html>
<html>

<body>
    <p>
        <input type="text" id="input" value="Text to call funcSync">
    </p>
    <p>
        <button id="button1"> Click to call ArkTS funcSync(text) </button>
    </p>
    <p>
        <input type="text" id="input2" value="Text to call funcSync with Promise">
    </p>
    <p>
        <button id="button2"> Click to call ArkTS funcSync(text) with Promise</button>
    </p>
    <div id="text"></div>

    <script>

        const _JSBridge = self['jsbridge'];

        // 提供 Promise 异步调用的接口
        const AsyncJSBridge = {
            call: (funcName, ...params) => {
                // 同步调用接口
                return _JSBridge.call(funcName, ...params);
            },
            callAsync: (funcName, ...params) => {
                // 异步调用接口
                return new Promise((resolve, reject) => {
                    try {
                        let res = _JSBridge.call(funcName, ...params);
                        resolve(res);
                    } catch (error) {
                        reject(error);
                    }
                });
            }
        }

        // 模仿 Alipay JSBridge，以 Dictionary 形式传入变量
        // 要求 Native 端对 Dictionary 进行反序列化和解析
        const DictionaryArgsJSBridge = {
            call: (funcName, paramsObject) => {
                return _JSBridge.call(funcName, JSON.stringify(paramsObject));
            }
        };

        // 提供一个获知异步Native方法结果的思路 JS部分
        // const CallbackJSBridge = {
        //     waitList: {},
        //     callAsync: function (asyncFuncName, callback, ...params) {
        //         let id = _JSBridge.call(asyncFuncName, ...params);
        //         this.waitList[asyncFuncName + id] = callback;
        //     },
        //     callBack: function (callBackId, result) {
        //         return this.waitList[callBackId](result);
        //     }
        // }

        const button1 = document.getElementById("button1");
        const button2 = document.getElementById("button2");
        const button3 = document.getElementById("button3");
        
        const input1 = document.getElementById("input");
        const input2 = document.getElementById("input2");
        const div1 = document.getElementById("text");
        
        // 同步调用 最基本的调用
        button1.addEventListener('click', function () {
            try {
                show(_JSBridge.call('funcSync', input1.value));
            } catch (err) {
                show('jsbridge-funcSync: ' + err.message);
            }
        });

        // 异步调用同步函数 使用 Promise
        button2.addEventListener('click', function () {
            try {
                AsyncJSBridge.callAsync('funcSync', input2.value)
                    .then(res => {show(res);})
                    .catch(err => {show(err.message);});
            } catch (err) {
                show('jsbridge-Promise-callAsync-funcSync: ' + err.message);
            }
        });

        function callMeInArkTS(name, info) {
            show(`Oh, ${name}. You call me!<br>Your info is ` + JSON.stringify(info));
        }
        function show(str) {
            div1.innerHTML = str;
        }
    </script>
</body>

</html>